﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
 Copyright 2008 Google Inc. 
 Licensed under the Apache License, Version 2.0: 
 http://www.apache.org/licenses/LICENSE-2.0 
 -->
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>Map</title>
<script type="text/javascript"
      src="http://maps.google.com/maps?file=api&amp;&v=2&key=ABQIAAAAjU0EJWnWPMv7oQ-jjS7dYxSPW5CJgpdgO_s4yyMovOaVh_KvvhSfpvagV18eOyDWu7VytS6Bi1CWxw"></script>

<script>

var map;
var polys = [];
var markers = [];
var editingNow = false;

function load() {
  if (GBrowserIsCompatible()) {
	map = new GMap2(document.getElementById("map"));

    map.setCenter(new GLatLng(37.400470,-122.072981), 13);
    map.addMapType(G_PHYSICAL_MAP);
    map.addControl(new GSmallMapControl());
    //map.addControl(new GMapTypeControl());
	
    GEvent.addListener(map, "click", function(overlay, latlng) {
      if (latlng && !editingNow) {
        createPolyAt(latlng);
      }
      //updateImage();
     });
    geocoder = new GClientGeocoder();
    //updateImage();
  }
}


function createPolyAt(latlng) {
  var poly = new GPolyline([latlng]);
  map.addOverlay(poly);
  poly.enableDrawing();
  editingNow = true;
  GEvent.addListener(poly, "mouseover", function() {
    poly.enableEditing();
  });
  GEvent.addListener(poly, "mouseout", function() {
    poly.disableEditing();
  });
  GEvent.addListener(poly, "lineupdated", function() {
    //updateImage();
  });
  GEvent.addListener(poly, "endline", function() {
    editingNow = false;
  });
  polys.push(poly);
}

function createMarkerAt(latlng, address) {
  var marker = new GMarker(latlng, {draggable:true, title: address});
  GEvent.addListener(marker, 'dragend', function() {
    //updateImage();
  });
  map.addOverlay(marker);
  markers.push(marker);
}


function showAddress() {
  var address = document.getElementById("addressTEXT").value;
  document.cookie = "set_location=" + address + ";";
  geocoder.getLatLng(
    address,
    function(latlng) {
      if (!latlng) {
        alert(address + " not found");
      } else {
        map.setCenter(latlng, 13);
        createMarkerAt(latlng, address);
        //updateImage();
      }
    }
  );
}

</script>

<link rel="stylesheet" type="text/css" href="http://code.google.com/css/dev_docs.css">
</head>
<body onload="load()" align='center'>
  <form id='form2' name='form2' >
	<input size="30" name="addressTEXT" id="addressTEXT" value="Mountain View, CA" type="text">
	<input value="Tìm địa điểm" onclick="showAddress()" type="button">
  </form>
  <br/>
  <div id="map" style="width: 730px; height: 410px"></div>


</body>
</html>


